<template>
    <div id="top-bar">
        <div class="logo">
            <img src="../assets/images/logo.png" alt="Kurisu" class="logo-img">
            <div class="logo-name">MKSchat</div>
        </div>
        <div class="menu">
            <a-button type="text" class="menu-btn" @click="loginClick">登录</a-button>
            <a-button type="text" class="menu-btn" @click="regClick">注册</a-button>

            <a-button type="text" class="menu-btn" @click="chatClick">聊天</a-button>
            <a-button type="text" class="menu-btn" @click="searchClick">搜索</a-button>
        </div>
        <!-- <a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" class="menu" /> -->
        <div class="user">
            <button @click="avatarClick">
                <img :src="loginUserStore.getAvatar" alt="头像" class="user-head">
            </button>


        </div>
        <!-- {{ loginUserStore.loginUser }} -->
    </div>
</template>

<script setup>
    import { useLoginUserStore } from '@/store/useLoginUserStore'
    // import { computed } from 'vue'
    import { useRouter } from 'vue-router'


    const loginUserStore = useLoginUserStore()
    const router = useRouter()
    const loginClick = () => {
        router.push({
            path: '/login'
        })
    }

    const regClick = () => {
        router.push({
            path: '/login/register'
        })
    }

    const chatClick = () => {

        if (loginUserStore.loginStatus) {
            router.push({ path: '/chat' })
        } else {
            router.push({ path: '/login/log' })
        }
    }

    const searchClick = () => {

        if (loginUserStore.loginStatus) {
            router.push({ path: '/search' })
        } else {
            router.push({ path: '/login/log' })
        }
    }

    const avatarClick = () => {
        if (loginUserStore.loginStatus) {
            router.push({ path: '/user' })
        } else {
            router.push({ path: '/login/log' })
        }
    }
</script>

<style lang="less" scoped>
    * {
        box-sizing: border-box;
    }

    #top-bar {
        width: 100%;
        height: 52px;
        background: rgba(255, 255, 255, 0.8);
        box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;
        display: flex;
        flex-direction: row;
        padding: 10px;
        justify-content: space-between;
        align-items: center;

        .logo {
            height: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            // justify-content: center;

            .logo-name {
                height: 100%;
                font-size: 30px;
                margin-left: 10px;
                font-weight: 500;
                display: flex;
                align-items: center;
                line-height: 1;
            }

            .logo-img {
                height: 100%;
            }
        }

        .menu {
            height: 100%;

            display: flex;
            flex-direction: row;
            justify-content: center;


            .menu-btn {
                height: 100%;
                margin-left: 20px;
            }

        }

        .user {
            width: 400px;

            button {
                float: right;
                border-radius: 50%;
                height: 37px;
                width: 37px;
                border: none;
                background: none;
                cursor: pointer;

            }



            .user-head {
                // box-sizing: content-box;
                float: right;
                border-radius: 50%;
                height: 36px;
                width: 36px;

            }

            .user-head:hover {
                border: 1px solid aqua;
            }
        }

    }




</style>